<script lang="ts" setup>
import { ref, computed, watch, onMounted, PropType, reactive } from 'vue';
import ATabsCard from '../myCreate/components/aTabsCard/index.vue';
import DemandDetailTabs from '../../../components/demandDetailTabs.vue'
import LevelHightIcon from '@/assets/images/level_hight_icon.svg';
import LevelMiddleIcon from '@/assets/images/level_middle_icon.svg';
import LevelSlotIcon from '@/assets/images/level_slot_icon.svg';
import {approvalType, statusColor} from '@/constants/approvalCenter'
import ModalDialog from '@/components/ModalDialog/index.vue';
import API from '@/services';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  checkDetail: {
    type: Array as PropType<any>
  },
  drawerTitle: {
    type: String
  }
})

const metricsList :any = ref([])
const visible = ref<boolean>(false)

const detailFormData:any=ref()
const visibleFn = () => {
    visible.value = true
}
enum levelDemand {
  'HIGH' = LevelHightIcon,
  'MEDIUM' = LevelMiddleIcon,
  'LOW' = LevelSlotIcon,
}

const modalTitle:any=ref()
const modalVisible:any=ref()
const loginFrom = reactive({
    remark: ''
})
const loginRef :any=ref()

const emit = defineEmits(['onReload'])
const handleSubmit = (v:any) => {
    modalVisible.value = true
    modalTitle.value = v
    loginFrom.remark = ''
}

const handleOk = async () => {
      const { checkDetail, drawerTitle } = props;
      let params = {
        id: checkDetail.id,
        opinion: loginFrom.remark
      };
      if (modalTitle.value === '审批通过') {
        try {
          const { code } = await API.demand.postApproved({ ...params });
          if (code === 200) {
            Message.success('审批成功')
            visible.value = false
            emit('onReload')
            approveCancel();
          } else {
            // Message.error('审批失败')
          }
        } catch (error) {
          console.log(error);
        }
      } else if (modalTitle.value === '驳回') {
        try {
          const err = await loginRef.value.validate();
          if (err) return
          const { code } = await API.demand.postReject({ ...params });
          if (code === 200) {
            Message.success('驳回成功')
            visible.value = false
            emit('onReload')
            approveCancel();
          } else {
            // Message.error('驳回失败')
          }
        } catch (error) {
          console.log(error);
        }
      }
    };
    //审批取消
    const approveCancel = () => {
      modalVisible.value = false;
      loginRef.value.resetFields();
    };

defineExpose({
    visibleFn
})

watch(
  () => props.checkDetail,
  (val) => {
    if (val) {
      detailFormData.value = val
    }
  },
  {
    immediate:true
  }
);
</script>

<template>
    <a-drawer 
          :visible="visible" 
          :esc-to-close = "false"
          :mask-closable="false"
          placement="right"
          width="720px"
          :footer="props.drawerTitle === '审批'"
          class="approval-drawer-wrapper"
          @cancel="() => {
            visible = false
          }"
          unmountOnClose>
          <template #title>
            <span class="fw">{{props.drawerTitle}}</span>
          </template>
          <div class="dev-drawer">
            <a-form 
              :model="detailFormData" 
              auto-label-width
            >
              <a-form-item 
                  show-colon
                  label="需求名称"
              >
                <span>{{detailFormData.demandName}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="优先级"
              >
                <img :src="levelDemand[detailFormData.priorityLevel]" alt="" />
                <span class="ml-6">{{detailFormData.priorityLevelDesc}}</span>
              </a-form-item>
              <a-form-item 
                  show-colon
                  label="需求描述"
              >
                <span>{{detailFormData.description}}</span>
              </a-form-item>
              
              <a-form-item 
                  show-colon
                  label="需求ID"
              >
                <span>{{detailFormData.id}}</span>
              </a-form-item>
              <div class="demand-approval">
                <DemandDetailTabs 
                  :tabsItem="detailFormData" 
                  myApproval="myApproval"
                />
              </div>
            </a-form> 
          </div>
          <template #footer v-if="props.drawerTitle === '审批'">
            <a-button @click="() => {
                visible = false
            }">取消</a-button>
            <a-button type="primary" status="danger" @click="handleSubmit('驳回')">驳回</a-button>
            <a-button type="primary"  @click="handleSubmit('审批通过')">审批通过</a-button>
          </template>
    </a-drawer>
    <modal-dialog
        :class="['inlie-login-dialog', {provelPass: modalTitle === '审批通过'}]"
        :modal-visible="modalVisible"
        :modalTitle="modalTitle"
        titleAlign="start"
        @update:modalVisible="(v) => (modalVisible = v)"
        @cancelModal="approveCancel"
        @sureModal="handleOk"
        width="368px"
    >
        <template v-slot:body>
            <a-form ref="loginRef" :model="loginFrom" :style="{ width: '100%' }">
                <a-form-item
                    show-colon
                    field="remark"
                    label="理由"
                    :rules="[{ required: modalTitle === '驳回' ? true : false,minLength: modalTitle === '驳回' ? 5 : 0, message: '请输入至少5个字符' }]"
                >
                    <a-textarea 
                        :style="{height: '72px'}"
                        v-model="loginFrom.remark"
                        :placeholder="modalTitle === '驳回' ? '请输入至少5个字符' : ''"
                    > 
                    </a-textarea>
                </a-form-item>
            </a-form>
        </template>
    </modal-dialog>
</template>
<style lang="scss">
@import './index.scss';
</style>
<style lang="scss" scoped>

.demand-approval {
    background: #F6F8FC;
    border-radius: 3px;
}
.dot-col {
  width: 8px;
    height: 8px;
    border-radius: 4px;
    display: inline-block;
}
.dev-drawer :deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
  text-align: center;
  line-height: 38px;
}
</style>